<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/y5.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>
<body>
    <div class="box-y5">
        <div class="img-y5"></div>
            <div class="top-y5">
                <div class="search-y5">
                    <span class="font-y5">搜索全球精选目的地</span>
                <a href="search.html">
                    <div class="btn-y5">
                        <span>搜索</span>
                    </div>
                </a>
                </div>
            </div>

        <div class="show-y5">
            <span>最近浏览</span>
            <span class="num-y5">442677人次</span>
        </div>
        <div class="recommend-y5">
        </div>
        <div class="foot-y5">
            <span>- 让旅行充满想象 -</span>
        </div>
    </div>
    
</body>
<script src="./js/reset.js"></script>
<script>
    const boxy5=document.querySelector(".recommend-y5")

    fetch(`https://m.youxiake.com/api/m/cmsweb/app/dest/hot/dest?sitecode=1&city_id=1&spm=`).then(res => res.json()).then(res1 => {
        console.log(res1.data);
        res1.data.destBlockVOList.forEach((item, index) => {
            let str = ''
            item.hotDestList.forEach(list => {
                const isSpecialCase = list.rank === 2 && (list.title === "新疆" || list.title === "埃及");
                str += `
                <li>
                    ${list.title === '新疆' || list.title === '埃及' ? 
                        `<img class="picture1-y5" src="${list.imageUrl}">` : 
                        `<img class="picture2-y5" src="${list.imageUrl}">`}
                    <div class="intro-y5">
                        <div class="title-y5">
                            <span class="text-y5">${list.title}</span>
                        </div>
                        <div class="data-y5">
                            ${list.title === '新疆' || list.title === '埃及' ? `<div class="icon-y5"></div>` : ``}
                            ${isSpecialCase ? 
                                `<span class="text1-y5">${list.viewCount}</span> <span class="text2-y5">人正在浏览</span>` : 
                                `<span class="text1-y5">${index === 0 ? '近7日热度' : list.subTitle}</span>
                                 <span class="text2-y5">${list.popularity7Days === 0 ? '' : list.popularity7Days}</span>`
                            }
                        </div>
                    </div>
                </li>
                `
            })
             const titleClass = item.blockName === '国内精选' ? 'hot1-y5' : (item.blockName === '境外精选' ? 'hot2-y5' : 'hot-y5');
            boxy5.innerHTML += `
            <div class="recommendtitle-y5">
                <span class="${titleClass}">${item.blockName}</span>
            </div>
            <ul class="lists-y5">${str}</ul>
            `
        })
    }).catch(err => {
        console.log(err);
    });
</script>
</html>